<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.mouse{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>{{data}}</p>
			<!-- 单击事件 -->
			<button type="button" v-on:click="alert('这个按钮被点击了')">点我</button>
			<!-- 双击事件 -->
			<button type="button" v-on:dblclick="alert('这个按钮被双击了')">点我</button>
			<!-- 键盘事件 -->
			<input type="text" v-model="data" v-on:keyup="keyup_"/>
			<!-- 鼠标移入 -->
			<br>
			<br>
			<div class="mouse" v-on:mousemove="mousemove">
				<p align="center">({{x}},{{y}})</p>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					data:null,
					x:0,
					y:0
				},
				methods:{
					keyup_:function(e){
						console.log(e)
					},
					mousemove:function(e){
						console.log(e);
						this.x = e.clientX;
						this.y = e.clientY
						
					}
				}
				
			})
		</script>
	</body>
</html>
